<template>
    <div class="data-set">
        <a-button class="margin-bottom-xs" type="primary" @click="() => tableVisible = true">选择</a-button>
        <a-table size="small" :columns="columns" :data-source="dataSource" :pagination="false"
                 :scroll="{ y: 'calc(50vh - 100px)' }">
            <!--<template slot="sort" slot-scope="text,record,index">-->
                <!--<a-icon type="arrow-up" class="margin-right-xs" :class="[index == 0 ? 'arrowHidden' : 'arrowShow']"-->
                        <!--@click="arrowButton(record,index,'up')"/>-->
                <!--<a-icon type="arrow-down" :class="[index == dataSource.length-1 ? 'arrowHidden' : 'arrowShow']"-->
                        <!--@click="arrowButton(record,index,'down')"/>-->
            <!--</template>-->
            <!--<template slot="associatedFields" slot-scope="text, record, index">-->
                <!--<a-select-->
                        <!--style="width: 80%"-->
                        <!--v-model="record['associatedFields']"-->
                        <!--@dropdownVisibleChange="(e) => associatedFieldsDropdown(e, index)"-->
                        <!--@change="handleChange($event,record,'associatedFields')"-->
                <!--&gt;-->
                    <!--<a-select-option v-for="item in columnData[index]" :key="item.columnName">-->
                        <!--{{item.remarks?item.remarks+'('+item.columnName+')':item.columnName}}-->
                    <!--</a-select-option>-->
                <!--</a-select>-->
            <!--</template>-->
            <!--<template slot="primarySubTable" slot-scope="text, record, index">-->
                <!--{{index == 0?'主表':'子表'}}-->
            <!--</template>-->
            <template slot="action" slot-scope="text, record, index">
                <a @click="handleDelete(index)" class="action-delete">删除</a>
            </template>
        </a-table>
        <tableModal
                ref="tableModal"
                :key="Date.now().valueOf()"
                :visible="tableVisible"
                @ok="selector"
                @cancel="() => tableVisible = false"
        />
    </div>
</template>

<script>
    import pick from 'lodash.pick';
    import tableModal from "./tableModal";

    export default {
        components: {tableModal},
        props: {
            isEdit: {
                type: Boolean,
                require: true
            }
        },
        data() {
            return {
                columns: [{
                    title: '表名称',
                    dataIndex: 'tableName',
                }, {
                    title: '表注释',
                    dataIndex: 'tableRemarks',
                }, {
                    title: '类型',
                    dataIndex: 'primarySubTable',
                    // scopedSlots: {customRender: 'primarySubTable'},
                }, {
                    title: '操作',
                    dataIndex: 'action',
                    scopedSlots: {customRender: 'action'},
                }],
                dataSource: [],
                tableVisible: false,
                columnData: [],
                randomTableName: '',
                databaseUuid: ''
            };
        },
        computed: {},
        watch: {},
        mounted() {

        },
        methods: {
            loadData(options) {
                let data = JSON.parse(options.databaseJson)
                this.cardKey = data.type
                if (data.type == 1) {
                    this.randomTableName = data.tableName
                } else {
                    this.dataSource = data.dataSource
                    this.columnData = data.columnData
                }
            },
            associatedFieldsDropdown(e, index) {
                if (e && !this.columnData[index]) {
                    this.$post("/system/sysDatabaseConnection/getColumn", {
                        uuid: this.databaseUuid,
                        tableName: this.dataSource[index].tableName
                    }).then(res => {
                        this.$set(this.columnData, index, res)
                    })
                }
            },
            handleDelete(index) {
                this.dataSource.splice(index, 1)
                this.columnData.splice(index, 1)
            },
            getDataBase() {
                let obj = {}
                if (this.cardKey == 1) {
                    obj = {
                        type: this.cardKey,
                        tableName: this.randomTableName
                    }
                } else {
                    obj = {
                        type: this.cardKey,
                        columnData: this.columnData,
                        dataSource: this.dataSource
                    }
                }
                return obj
            },
            handleChange(e, record, key) {
                record[key] = e
            },
            selector(rows, key, uuid) {
                this.dataSource = rows
                this.databaseUuid = uuid
            },
            /**
             * 随机生成表名接口，携带基础配置表单中的名称
             * */
            generateTableName(name) {
                this.$post("/form/formDatabase/generateRandomTableName", {
                    name: name
                }).then(res => {
                    this.randomTableName = res
                })
            }
        },
        created() {

        },
    }
</script>

<style lang="scss" scoped>
    // .ant-form{
    // 	border-radius: 10px;
    // 	min-height: 500px;
    // 	margin: 0 auto;
    // 	padding: 30px 20px 50px 20px;
    // 	box-shadow: 1px 2px 8px #e8e8e8;
    // }

    .data-set {
        height: calc(100vh - 76px);
        margin: 10px;
        background-color: #fff;
    }

    .col-box {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        height: calc(100vh - 116px);
    }

    .card-box {
        display: flex;
        justify-content: space-evenly;
        margin: 0 auto 30px;
        width: 50%;
    }

    .card-item {
        transition: 0.3s all;
        cursor: pointer;
        width: 181px;
        border: 1px solid #F0F2F5;
        border-radius: 10px;
        .img-box {
            padding: 40px 20px 20px;
            img {
                width: 100%;
            }
        }
    }

    .card-selected {
        border: 1px solid #1890ff;
        border-radius: 10px;
    }

    .card-item:hover {
        transform: scale(1.02);
        box-shadow: 3px 5px 15px rgba(40, 40, 40, 0.36);
    }

    .text-box {
        text-align: center;
        margin-bottom: 20px;
        .title {
            display: inline-block;
            margin-right: 10px;
            font-size: 16px;
            color: #171a1d;
            font-weight: 600;
        }
    }

    .arrowHidden {
        color: #e7e7e7;
    }

    .arrowShow {
        color: #606266;
        &:hover {
            color: #1890ff;
        }
    }
</style>
